<template>
  <div class="staffAudit">
    <div class="bgg">
      <div class="card_title">
        员工审核
      </div>
      <div class="groupbox flex row_bet flex_wrap" style="margin-bottom: 19px">
        <div class="h24">
          <div class="flex row_bet flex_wrap">
            <a-radio-group v-model="status" style="margin-bottom: 5px;margin-left:5px;" @change="statusChange">
              <a-radio-button :value="1">
                待审核
              </a-radio-button>
              <a-radio-button :value="2">
                员工
              </a-radio-button>
              <a-radio-button :value="3">
                组长
              </a-radio-button>
            </a-radio-group>
          </div>
        </div>
        <div class="flex row_left flex_wrap">
          <a-input-search
            placeholder="用户名 / 手机号"
            style="width: 200px;margin-left:5px;margin-bottom: 5px"
            v-model="search"
            @search="onSearch"
          />
        </div>
      </div>
      <a-table
        :columns="columns"
        :rowKey="activity => activity.id"
        :dataSource="activity"
        :loading="loading"
        @change="handleTableChange"
        :pagination="pagination"
      >
        <div slot="role">
          <a-tag color="pink" v-if="status === 1">
            待审核
          </a-tag>
          <a-tag color="green" v-if="status === 2">
            员工
          </a-tag>
          <a-tag v-if="status === 3">
            组长
          </a-tag>
        </div>
        <div slot="teamName" slot-scope="row">
          <div>{{ row.teamName }} - {{ row.user }}</div>
        </div>
        <div slot="active" slot-scope="row">
          <a-button v-if="status === 1" type="link" @click="doExamineStaffInfo(row.id)">审核</a-button>
          <a-space v-else>
            <div v-if="status === 2">
              <a-popconfirm placement="bottom" ok-text="确定" cancel-text="取消" @confirm="doSetGroupData(row.id)">
                <template #title>
                  <p>是否设为组长?</p>
                </template>
                <a-button type="link">设为组长</a-button>
              </a-popconfirm>
            </div>
            <div v-if="status === 3">
              <a-popconfirm placement="bottom" ok-text="确定" cancel-text="取消" @confirm="doSetGroupUser(row.id)">
                <template #title>
                  <p>是否设为员工?</p>
                </template>
                <a-button type="link">设为员工</a-button>
              </a-popconfirm>
            </div>
            <a-popconfirm placement="bottom" ok-text="确定" cancel-text="取消" @confirm="doSetQuitUser(row.id)">
              <template #title>
                <p>该员工是否离职?</p>
              </template>
              <a-button type="link">离职</a-button>
            </a-popconfirm>
            <a-button type="link" @click="openD(row)">修改</a-button>
          </a-space>
        </div>
      </a-table>
    </div>
    <a-drawer
      title="成员编辑"
      :width="513"
      :visible="drawershow"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <div class="drawer1">
        <div class="titles flex col_center" style="margin-top: 0;">用户名:
          <span class="m_l_10"> {{ info.user }}</span>
        </div>
        <div class="titles">新手机号</div>
        <a-input v-model="phone" placeholder="请输入新手机号"/>
        <div class="titles">密码</div>
        <a-input v-model="pass" placeholder="请输入新密码"/>
        <div
          :style="{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
            zIndex: 1
          }"
        >
          <a-button
            type="primary"
            style="float:left;"
            :disabled="btnloading"
            :loading="btnloading"
            class="br4"
            @click="dosubmit">
            <a-icon v-if="btnloading" type="reload" :spin="btnloading"/>
            确认修改
          </a-button>
        </div>
      </div>
    </a-drawer>
  </div>
</template>

<script>
  import {
    getSiteStaffList,
    doExamineStaffInfo,
    doSetGroupData,
    doSetQuitUser,
    doUpdateUserInfoData,
    doSetGroupUser
  } from '@/api/admin/staff'
  import moment from 'moment'

  export default {
    name: 'StaffAudit',
    data () {
      return {
        moment,
        pass: '',
        phone: '',
        drawershow: false,
        status: 1,
        search: '',
        columns: [
          {
            title: '用户ID',
            align: 'left',
            dataIndex: 'id',
            scopedSlots: {
              customRender: 'id'
            }
          },
          {
            title: '用户名',
            // width: 150,
            align: 'center',
            dataIndex: 'user',
            scopedSlots: {
              customRender: 'user'
            }
          },
          {
            title: '手机号',
            align: 'center',
            dataIndex: 'mobile',
            scopedSlots: {
              customRender: 'mobile'
            }
          },
          {
            title: '注册时间',
            align: 'center',
            // width: 500,
            dataIndex: 'useTime',
            scopedSlots: {
              customRender: 'useTime'
            }
          },
          {
            title: '用户角色',
            align: 'center',
            dataIndex: 'role',
            scopedSlots: {
              customRender: 'role'
            }
          },
          {
            title: '用户归属',
            align: 'center',
            // dataIndex: 'teamName',
            scopedSlots: {
              customRender: 'teamName'
            }
          },
          {
            title: '操作',
            align: 'center',
            scopedSlots: {
              customRender: 'active'
            }
          }
        ],
        activity: [
          {
            id: 2574, // 自增id
            user: '沈一博', // 用户
            mobile: '13213170986', // 手机号
            useTime: '2020-09-16', // 入职时间
            teamName: '', // 团队名称
            group: '沈一博' // 组长
          }
        ],
        loading: false,
        pagination: {
          pageSize: 15,
          page: 1
        },
        info: {},
        value: '',
        btnloading: false
      }
    },

    computed: {},
    created () {
      this.getSiteStaffList(1)
    },
    mounted () {
    },
    methods: {
      openD (row) {
        console.log(row)
        this.info = row
        this.drawershow = true
      },
      dosubmit () {
        this.btnloading = true
        if (this.info.id && this.phone !== '' && this.pass !== '') {
          doUpdateUserInfoData({
            id: this.info.id,
            phone: this.phone,
            pass: this.pass
          }).then(res => {
            console.log(res)
            if (res.code === 200) {
              this.btnloading = false
              this.$message.success('修改成功!')
              this.getSiteStaffList(1)
            } else {
              this.btnloading = false
              this.$message.error(res.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          this.btnloading = false
          this.$message.info('请检查条件!')
        }
      },
      onClose () {
        this.drawershow = false
      },
      doExamineStaffInfo (id) {
        doExamineStaffInfo({
          id: id
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.$message.success('审核成功!')
            this.getSiteStaffList(1)
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      doSetGroupData (id) {
        doSetGroupData({
          id: id
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.$message.success('设置成功!')
            this.getSiteStaffList(1)
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      doSetGroupUser (id) {
        doSetGroupUser({
          group_id: id
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.$message.success('设置成功!')
            this.getSiteStaffList(1)
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      doSetQuitUser (id) {
        doSetQuitUser({
          id: id
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.$message.success('设置成功!')
            this.getSiteStaffList(1)
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      userChange (value) {
        console.log(value) //
        if (value === undefined) {
          this.user_id = null
        } else {
          this.user_id = value.key
        }
        this.getSiteStaffList(1)
      },
      disabledEndDate (endValue) {
        if (!endValue) {
          return false
        }
        return endValue < moment().subtract(1, 'days') || endValue > moment().add(30, 'days')
      },
      sceneIdChange (e) {
        // console.log(this.sceneId)
        this.getSiteStaffList(1)
      },
      goaudit (row) {
        this.$store.dispatch('setRowsname', row)
        this.$router.push({
          path: '/activity/staffAudit/myAudit'
        })
      },
      docopy (id) {
        const that = this
        const str = 'http://ad.alimama.com/zhaoshang/cpevent/index.htm?srcCode=1&keyword=' + id
        this.$copyText(str).then(
          function (e) {
            // console.log(e)
            that.$success({
              title: '链接复制成功',
              content: str
            })
          },
          function (e) {
            console.log(e)
          }
        )
      },
      getSiteStaffList (page) {
        this.loading = true
        getSiteStaffList({
          page: page,
          pagesize: 15,
          status: this.status, // 1待审核，2成员，3组长
          search: this.search
        })
          .then(res => {
            console.log('列表', res)
            this.activity = res.data.data
            //  this.count = res.data.count
            const pagination = {
              ...this.pagination
            }
            pagination.total = res.data.count
            this.pagination = pagination
            this.loading = false
          })
          .catch(err => {
            console.log(err)
          })
      },
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.loading = true
        this.getSiteStaffList(params.page, 15, this.status, this.search)
      },
      onSearch (value) {
        console.log(value)
        this.getSiteStaffList(1, 15, this.status, this.search)
      },
      statusChange (e) {
        // console.log('radio checked', e.target.value)
        this.getSiteStaffList(1, 15, this.status, this.search)
      }
    }
  }
</script>
<style lang="less">
  .drawer1 {
    .titles {
      color: rgba(16, 16, 16, 100);
      font-size: 13px;
      text-align: left;
      margin-bottom: 8px;

      a {
        line-height: 23px;
      }
    }
    .chooseipt {
      width: 100%;
      margin-bottom: 25px;
    }

    /deep/ .ant-input {
      border-radius: 4px;
    }

    /deep/ .ant-select-selection {
      border-radius: 4px;
    }
  }
</style>
<style lang="less" scoped>
  .staffAudit {
    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 20px;
      margin-bottom: 18px;
      font-weight: 600;
    }

    .bgg {
      border-radius: 8px;
      margin-top: 10px;
      padding: 10px;
    }

    .groupbox {
      /deep/ .ant-input {
        border-radius: 4px;
      }
    }

    /deep/ .ant-table-body {
      border: 1px solid #BBBBBB;
      border-radius: 8px 8px 0 0;
    }

    /deep/ .ant-table-tbody {
      background-color: #ffffff;
    }

    /deep/ .ant-table-pagination.ant-pagination {
      float: none !important;
      margin: 16px auto !important;
      text-align: center !important;
    }

  }
</style>
